<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS Cookbook: Pagination</title>

    <style>
      body {
        background-color: #fff;
        color: #333;
        font:
          1.2em / 1.5 Helvetica Neue,
          Helvetica,
          Arial,
          sans-serif;
        padding: 0;
        margin: 0;
      }

      /* class to hide content visually leaving it available to screenreaders.
        See notes in cookbook recipe.
        https://github.com/h5bp/html5-boilerplate/issues/1985#issuecomment-394096182
        https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
        */
      .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: auto;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap;
      }

      nav {
        display: flex;
        justify-content: center;
        border-top: 1px solid #eee;
        margin-top: 1em;
        padding-top: 0.5em;
      }

      .pagination {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
      }

      .pagination li {
        margin: 0 1px;
      }

      .pagination a {
        display: block;
        padding: 0.5em 1em;
        border: 1px solid #999;
        border-radius: 0.2em;
        text-decoration: none;
      }

      .pagination a[aria-current="page"] {
        background-color: #333;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <nav aria-label="pagination">
      <ul class="pagination">
        <li>
          <a href=""
            ><span aria-hidden="true">&laquo;</span
            ><span class="visuallyhidden">previous set of pages</span></a
          >
        </li>
        <li>
          <a href=""><span class="visuallyhidden">page </span>1</a>
        </li>
        <li>
          <a href="" aria-current="page"
            ><span class="visuallyhidden">page </span>2</a
          >
        </li>
        <li>
          <a href=""><span class="visuallyhidden">page </span>3</a>
        </li>
        <li>
          <a href=""><span class="visuallyhidden">page </span>4</a>
        </li>
        <li>
          <a href=""
            ><span class="visuallyhidden">next set of pages</span
            ><span aria-hidden="true">&raquo;</span></a
          >
        </li>
      </ul>
    </nav>
  </body>
</html>
